<script lang="ts" setup>
import dayjs from 'dayjs'
import {orderTrend} from '@/api/visualization'
import OrderTrendStatistics from '../options/order-trend-statistics'

interface itemType {
    month_order: string,
    value: number
}

const res = await orderTrend()
let months = res.data.map((item: itemType) => Number(dayjs(item.month_order).format('MM')))
let data = res.data.map((item: itemType) => item.value)

const option = $ref(OrderTrendStatistics(months, data))
</script>

<template>
    <div h-61 w-96 flex="~ col" bg="[url(@/assets/image/border/OrderTrendStatisticsBorder.png)] no-repeat center cover">
        <div p="x-8 t-4" text="#17caf0 5.5" font="bold">订单量趋势统计</div>
        <EchartsContainer :option="(option)"/>
    </div>
</template>
